<template>
    <div class="info">
        <p class="title">
            <i></i>
            病毒信息
        </p>
        <div class="content">
            <p>{{covid19Info.note1}}</p>
            <p>{{covid19Info.note2}}</p>
            <p>{{covid19Info.note3}}</p>
            <p>{{ covid19Info.remark1 }}</p>
            <p>{{ covid19Info.remark2 }}</p>
            <p>{{ covid19Info.remark3 }}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Covid19Info',
    props: {
        covid19Info: {
            type: Object,
            default: function() {
                return {}
            }
        }
    }
}
</script>

<style scoped>
.info {
    background: rgb(211, 207, 207);
    padding: 0.16rem;
    border-bottom: 1px solid #f1f1f1;
    border-radius: 0.1rem;
}
.title {
    font-size: 0.17rem;
}

.title i {
    width: 0.04rem;
    height: 0.16rem;
    background: #4169e2;
    display: inline-block;
    margin-right: 0.03rem;
    vertical-align: middle;
}

.content {
    padding: 0.06rem 0.16rem;
}
.content p {
    font-size: 0.13rem;
    margin: 0.05rem 0;
}
</style>